<template>
  <div class="commm-player-main">
    <div class="rtcPlayer">
      <video :id="elementId" :ref="elementId" class='webRtcPlayerBox' controls autoplay style="text-align:left;">
        Your browser is too old which doesn't support HTML5 video.
      </video>
    </div>
  </div>
</template>
<script>
import Device from '@/api/Device';
import {apiResult} from "@/libs/util";
let webrtcPlayer = null;
export default {
  name: 'rtcPlayer',
  //props: ['videoUrl', 'error', 'hasaudio'],
  props:{
    playParam:{
      type: Object,
      default: ()=>{
          return{unknown:1}
        }
    },
    elementId:{
      type:String,
      default: "elementId"
    }
  },
  data() {
    return {
      api: new Device(),
      timer: null,
      videoUrl: null,
      deviceId: null,
      channelId: null,
      protocol: "rtc",
      playing: false
    };
  },
  mounted () {
    this.playing = false;
    /*let paramUrl = decodeURIComponent(this.$route.params.url)
    this.$nextTick(() =>{
      if (typeof (this.videoUrl) == "undefined") {
        this.videoUrl = paramUrl;
      }
      console.log("初始化时的地址为: " + this.videoUrl)
      this.play(this.videoUrl)
    })*/
  },
  watch:{
/*    videoUrl(newData, oldData){
      this.pause();
      this.play(newData);
    },
    immediate:true*/
  },
  methods: {
    isPlaying(){
      return this.playing;
    },
    playInvite(){
      if (!!this.deviceId && !!this.channelId){
        this.api.playStart(this.deviceId,this.channelId).then(res=> {
          apiResult(res.data,false,result=>{
            console.log(res.data.data);
            if (!!res.data.data[this.protocol]){
              this.videoUrl = res.data.data[this.protocol]
              this.rePlay();
            }
          })
          /*if (res.data.code == 0) {
            //this.isPalyStart=false;
            console.log(res.data.data);
            if (!!res.data.data[this.protocol]){
              this.videoUrl = res.data.data[this.protocol]
              this.rePlay();
            }
          }else{
            console.log(res.data.msg);
          }*/
        })
      }else{
        /*if (!!this.rePlayTimer) {
          clearInterval(this.rePlayTimer);
          this.rePlayTimer=null;
        }*/
        console.log(res.data.msg);
      }
    },

    play(videoUrl,deviceId,channelId){
      if (!!deviceId){this.deviceId = deviceId}
      if (!!channelId){this.channelId = channelId}
      if (!!this.deviceId && !!this.channelId){
        this.playInvite();
      }
    },
    rePlay: function () {
      console.log("rePlay");
      webrtcPlayer = new ZLMRTCClient.Endpoint({
        element: document.getElementById(this.elementId),// video 标签
        debug: true,// 是否打印日志
        zlmsdpUrl: this.videoUrl,//流地址
        simulecast: false,
        useCamera: false,
        audioEnable: true,
        videoEnable: false,
        recvOnly: true,
      })
      console.log("webrtcPlayer");
      webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 协商出错
        console.error('ICE 协商出错')
        this.eventcallbacK("ICE ERROR", "ICE 协商出错")
      });

      webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流，可以播放
        console.log('播放成功',e.streams)
        this.eventcallbacK("playing", "播放成功")
        this.playing = true;
      });

      webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,(e)=>{// offer anwser 交换失败
        console.error('offer anwser 交换失败',e)
        this.eventcallbacK("OFFER ANSWER ERROR ", "offer anwser 交换失败")
        if (e.code ==-400 && e.msg=="流不存在"){
          console.log("流不存在")
          this.timer = setTimeout(()=>{
            this.webrtcPlayer.close();
            //this.play(url)
            this.rePlay()
          }, 100)

        }
      });

      webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流

        // document.getElementById('selfVideo').srcObject=s;
        this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
      });

    },
    pause: function () {
      if (webrtcPlayer != null) {
        webrtcPlayer.close();
        webrtcPlayer = null;
      }

    },
    eventcallbacK: function(type, message) {
      console.log("player 事件回调")
      console.log(type)
      console.log(message)
    }
  },
  destroyed() {
    clearTimeout(this.timer);
  },
}

</script>
<style lang="less">
@import "Player";

//所有控件
/*video::-webkit-media-controls-enclosure{
  display: none;
}*/
</style>
